import React from 'react';

import { useState } from 'react'
// 注意: 在函数组件中,当函数组件中的状态被修改后, 函数组件整体会重新执行
const Father = () => {
    const [count, setCount] = useState(0)
    // 注意:参数1: count 为访问的state 变量 ,
    // 参数2: setCount 为修改count 的方法,并且只能通过该方法修改count
    // 参数2： 实现修改参数1胡变量值 有2种方式 
    // 第一种: 直接赋值 setCount(新值)
    // 第二种方式: 以函数返回的形式赋值 setCount (()=>count+1)
    //  console.log(count, setCount);
    const addCount = () => {
        // setCount(count + 1)
        setCount(() => count + 1)
    }

    // 当修改的值为对象
    const [user, setUser] = useState({ username: '陈飞雨', age: 20 });
    const edituserFn = () => {

        // 01: 方式
        // setUser({
        //     username: '陈飞雨',
        //     age: user.age + 1
        // })

        // 02:方式
        user.age = user.age + 1;
        // console.log(user)
        // 注意: 对于复杂或引用数据类型, 不能使用原变量名进行修改,会被react 的判断条件认为是同一个变量, 
        // 指向同一个内存区域, 所以不进行数据的修改,应该赋值为一个新值
        // setUser({ ...user })

        // 当修改数值为数组

    }

    // 修改数组
    const [namearr, setnamearr] = useState(['陈凯歌', '张艺谋', '张纪中'])
    const addDaoFn = () => {
        // 01: 
        //namearr.push('冯小刚')
        // setnamearr([...namearr])

        // 02: 
        setnamearr((val) => {
            // 形参 val 就是要修改的数据
            console.log(val);
            val.push('王家卫');
            return [...val]
        })

    }

    return (
        <div>
            {/* 操作普通变量 */}
            <p>count:{count} --<button onClick={addCount}>count++</button></p>
            {/* <p>count:{count} --<button onClick={() => setCount(count + 1)}>count++</button></p> */}
            {/* 操作对象 */}
            <p onClick={edituserFn}>user:{user.username}--{user.age}</p>
            {/* 操作数组 */}
            <ul>
                {
                    namearr.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
            <p><button onClick={addDaoFn}>添加导演</button></p>
        </div>
    );
}

export default Father;
